<template>
  <v-app>
    <div class="index_view index">
      <app-studioaction :viewTitle="$t(model.srfCaption)" viewName="index"></app-studioaction>
      <layout :class="themeClasses">
        <layout id="movebox">
          <div v-show="!collapseChange" id="move_axis"></div>
          <layout id="right_move">
            <header class="index_header">
              <span v-show="!collapseChange" class="caption">
                <div class="mainCaption">
                  <img src="../../../assets/img/logo2.png" @click="openIbiz()">
                  <span @click="openPms()">PMS</span>
                </div>
                <span class="subCaption">{{$t(model.srfCaption)}}</span>
              </span>
              <app-nav-menu :viewState="viewState" name="appmenu"></app-nav-menu>
              <div class="header-right" style="display: flex;align-items: center;justify-content: space-between;">
                <app-message-custom></app-message-custom>
                <app-user></app-user>
              </div>
            </header>
            <content class="index__content" @click="contextMenuDragVisiable=false">

              <app-keep-alive :routerList="getRouterList">
                <router-view :key="getRouterViewKey"></router-view>
              </app-keep-alive>

            </content>
            <footer class="index_footer">
              <div>
                <span>Copyright 2017-2020 埃毕致（上海）云计算科技有限公司 | ibiztodo</span>
              </div>
            </footer>
          </layout>
        </layout>
        <el-backtop target=".index_view"></el-backtop>
      </layout>
    </div>
  </v-app>
</template>
<script lang='tsx'>
import { Component } from "vue-property-decorator";
import IndexBase from "./index-base.vue";

import view_appmenu from "@widgets/app/index-appmenu/index-appmenu.vue";
@Component({
  components: {
    view_appmenu,
  },
  beforeRouteEnter: (to: any, from: any, next: any) => {
    next((vm: any) => {
      if (!Object.is(vm.navModel, "route")) {
        vm.initNavDataWithTab(vm.viewCacheData);
      }
      vm.$store.commit("addCurPageViewtag", {
        fullPath: to.fullPath,
        viewtag: vm.viewtag,
      });
    });
  },
})
export default class Index extends IndexBase {
  /**
   * 打开pms系统
   *
   * @memberof Index
   */
  public openPms() {
    let appData: any = this.$store.getters.getAppData();
    if (appData.pmsUrl) {
      window.open(appData.pmsUrl);
    }
  }

  public openIbiz(){
    window.open("https://www.ibizsys.cn/");
  }
}
</script>
<style lang="less">
.index {
  position: relative;
}
.el-backtop {
  background-color: #26c6da;
  width: 64px;
  height: 64px;
  color: #fff;
}
.el-backtop:hover {
  background-color: #4dd0e1;
  color: #fff;
}
.ivu-btn {
  color: #fff;
}
.v-application {
  background-color: transparent !important;
}
.index_view {
  margin-bottom: 1px;
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  padding: 0;
  margin: 0;
  background-color: transparent;
  .index_header {
    div {
      line-height: 20px;
    }
    .caption {
      text-align: center;
      display: flex;
      align-items:flex-end;
    }
    .mainCaption {
      font-weight: 800;
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items:flex-end;
      >img{
        background-color:#000;
        padding:3px 8px;
        border-radius: 5px;
      }
      >span{
        margin-left:3px;
      }
    }
    .mainCaption > span:hover {
      color: #455A64;
    }
    .subCaption {
      font-weight: 600;
      margin-left: 5px;
      overflow-x: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 12px;
    }
    padding: 12px 24px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: transparent;
  }
  .index__content {
    position: relative;
    width: 962px;
    margin: 0 auto;
    height: 100%;
  }
  .index_footer {
    width: 960px;
    margin: 0 auto;
    padding: 36px 0;
    font-size: 12px;
    text-align: center;
    color: rgba(0, 0, 0, 0.4);
  }
  .ivu-layout {
    background-color: transparent;
  }

  > .ivu-layout {
    > .ivu-layout {
      height: 100%;
    }
  }
  .ivu-layout .ivu-layout-sider .ivu-layout-sider-children {
    margin-top: -2px;
    line-height: 58px;
    text-align: center;
    font-size: 20px;
    cursor: pointer;
  }
}

/***    BRGIN:滚动条样式    ***/
::-webkit-scrollbar {
  background: transparent;
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  border-radius: 0;
  box-shadow: none;
  border: 0;
  background-color: #cecece;
}
::-webkit-scrollbar-track {
  border-radius: 0;
  box-shadow: none;
  border: 0;
}
html {
  overflow: hidden;
}
</style>